<template>
  <el-card style="max-width:100%">
    <template #header>
      <div class="card-header">
        <span>交易评论管理</span>
      </div>
    </template>

    <el-form :inline="true" :model="queryFrm" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="selectedRoute" placeholder="切换审核状态" style="width: 200px;" @change="changeRoute">
          <el-option
              v-for="item in routeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评论内容">
        <el-input v-model="queryFrm.keyword" placeholder="请输入关键字" clearable />
      </el-form-item>
      <el-form-item label="评论审核状态">
        <el-select v-model="queryFrm.Comment_status" placeholder="请选择审核状态" clearable style="width: 170px;">
          <el-option
              v-for="item in commentStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData"  style="width: 100%">
      <el-table-column prop="comment_id" label="评论编号" width="120" />
      <el-table-column prop="nick_name" label="昵称" width="90" />
      <el-table-column prop="order_id" label="订单编号" width="120" />
      <el-table-column prop="comment_content" label="评论内容" width="120" />
      <el-table-column prop="comment_rank" label="评论等级" width="120" />
      <el-table-column prop="comment_time" label="评论时间" width="150" />
      <el-table-column prop="comment_status" label="审核结果" width="120" />
      <el-table-column prop="beizhu" label="备注" width="120" />
      <el-table-column prop="operator" label="审核员" width="120" />

<!--      <el-table-column fixed="right" label="操作" width="120">-->
<!--        <template #default="scope">-->
<!--          <el-button link type="danger" size="small" @click="handleClick(scope.row)">审核-->

<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
  </el-card>
  <!--审核上架商品信息-->
  <el-dialog v-model="dialogChecksFormVisible" title="交易评论审核" width="800">
    <el-form :model="formsCheck">
      <el-form-item label="评论编号" :label-width="formLabelWidth">
        {{formsCheck.comment_id}}
      </el-form-item>
      <el-form-item label="昵称" :label-width="formLabelWidth">
        {{formsCheck.nick_name}}
      </el-form-item>
      <el-form-item label="订单编号" :label-width="formLabelWidth">
        {{formsCheck.order_id}}
      </el-form-item>
      <el-form-item label="评论内容" :label-width="formLabelWidth">
        {{formsCheck.comment_content}}
      </el-form-item>
      <el-form-item label="评论等级" :label-width="formLabelWidth">
        {{formsCheck.comment_rank}}
      </el-form-item>
      <el-form-item label="评论时间" :label-width="formLabelWidth">
        {{formsCheck.comment_time}}
      </el-form-item>
      <el-form-item label="审核状态" :label-width="formLabelWidth">
        <el-select v-model="formsCheck.comment_status" >
          <el-option label="通过" value="通过" />
          <el-option label="不通过" value="不通过" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="formsCheck.beizhu" autocomplete="off" />
      </el-form-item>
      <el-form-item label="审核人" :label-width="formLabelWidth">
        {{ formsCheck.operator }}
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogChecksFormVisible = false">取消</el-button>
        <el-button type="primary" @click="CommentStatus">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 4, 5, 6]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />

</template>

<script>
// import axios from 'axios';
import {ElMessage}  from "element-plus";

export default{
  data(){              //数据存放位置
    return {
      commentStatusOptions:[
        { value: '通过', label: '通过' },
        { value: '不通过', label: '不通过' },
      ],
      selectedRoute: null, // 用于v-model绑定
      routeOptions: [
        { label: '未审核', value: '/uacommment' },
        // 其他路由选项
        { label: '已审核', value: '/acommment' },
        // 可以根据需要添加更多路由选项
      ],
      //分页
      currentPage: 1,
      pageSize: 5,
      pageInfo: {},

      formLabelWidth : '140px',
      formsCheck:{},
      form:{},        //审核评论交易信息
      dialogChecksFormVisible:false,//审核弹窗
      // formInline: {},
      queryFrm: {
        keyword:"",
        Comment_status:""
      },
      tableData:[],//评论交易审核信息表格
    }
        ;
  },
  methods:{
    changeRoute(value) {
      if (this.selectedRoute) {
        // 确保 this.selectedRoute 是一个有效的路由路径字符串
        this.$router.push(this.selectedRoute);
      } else {
        console.error("Selected route is not defined or invalid.");
      }
    },
    //分页
    // LoadStuPageData() {
    //   this.$http.get("http://localhost:8080/approvalcomment/page", {
    //     params: {
    //       page: this.currentPage,
    //       size: this.pageSize
    //     }
    //   }).then((res) => {
    //     this.pageInfo = res.data;
    //     this.tableData = res.data.list;
    //     console.log(this.tableData);
    //   }).catch((err) => {
    //     console.log(err);
    //   });
    // },

    handleClick(check_id){
      console.log(check_id)
      // this.formsCheck = {...check_id};
      this.formsCheck = {...check_id,operator:this.currentAdminName};
      this.dialogChecksFormVisible = true;//显示审核弹窗
    },
    onSubmit(){
      console.log(this.queryFrm);
      this.LoadCommentData();
    },
    LoadtablesData() {
      // 获取商品数据
      this.$http.get("http://localhost:8080/approvalcomment/queryStatusNa",{params:{
          Comment_status:'审核中'
        }}).then((res) => {
        this.tableData = res.data;
        console.log(this.tableData);
      }).catch((err) => {
        console.error('请求数据失败:', err);
      })
    },
    // 处理审核结果的方法

    // 更新商品状态
    CommentStatus(){
      console.log(this.formsCheck)
      this.$http.post("http://localhost:8080/approvalcomment/update", this.formsCheck).then((res) => {
        if (res.data === 1) {
          console.log("修改成功！");
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
          this.dialogChecksFormVisible = false;//
          this.LoadtableData();
          this.formsCheck = {};
        } else {
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
          console.log("修改失败！");
        }
        console.log(this.formsCheck);
      }).catch((err)=>{
        console.error("更新失败：", err);
      })
    },
    LoadCommentData(){
      // console.log(this.queryFrm);
      // let params = {};
      // if (this.queryFrm.keyword) {
      //   params.keyword = this.queryFrm.keyword;
      // }
     /* if (this.queryFrm.Comment_status) {
        params.Comment_status = this.queryFrm.Comment_status;
       }*/
      this.$http.get("http://localhost:8080/approvalcomment/queryConArankNA",{params:{
           keyword:this.queryFrm.keyword,
           Comment_status:this.queryFrm.Comment_status
        }
    }).then((res)=>{
        this.tableData = res.data
        console.log(this.tableData);
      }).catch(function(err){
        console.log(err);
      })
    }
  },

  //被挂载，当前所有组件都被渲染完毕
  mounted() {
    // this.LoadStuPageData();  //分页
    this.currentAdminName = localStorage.getItem('adminName')
    console.log(this.currentAdminName)
    this.LoadtablesData();
  }
};
</script>

<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

</style>
